<template>
  <div class="adduser">
    <div class="adduser_box">
      <el-form
        :model="identityInfo"
        status-icon
        :rules="rules"
        ref="identityInfo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="身份名称" prop="identity">
          <el-input v-model.number="identityInfo.identity"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('identityInfo')"
            >提交</el-button
          >
          <el-button @click="resetForm('identityInfo')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ADD_IDENTITY } from "../../../store/actionType";
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("user");
export default {
  data() {
    return {
      identityInfo: {
        identity: "",
      },
      rules: {
        identity: [{ validator: this.validateIdentity, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapActions([ADD_IDENTITY]),
    validateIdentity(rule, value, callback) {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.formInline.region);
          // alert("submit!");
          this[ADD_IDENTITY]({
            identity_text: this.identityInfo.identity,
          }).then((res) => {
            if (res) {
              this.$message({
                message: "身份添加成功",
                type: "success",
              });
              this.identityInfo.identity = ''
            }else{
                this.$message({
                message: "身份名称重复",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.adduser_box {
  width: 300px;
}
</style>